<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统锁定 | 光宗耀祖科技平台</title>
    <link th:href="@{favicon.ico}" rel="shortcut icon"/>
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #00f2fe;
            --secondary-color: #4facfe;
            --accent-color: #00d2ff;
            --dark-color: #0f172a;
            --light-color: #e2e8f0;
            --neon-glow: 0 0 10px rgba(0, 242, 254, 0.8);
        }

        body {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: var(--light-color);
            font-family: 'Orbitron', 'Microsoft YaHei', sans-serif;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }

        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                radial-gradient(circle at 20% 30%, rgba(0, 242, 254, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(79, 172, 254, 0.1) 0%, transparent 50%);
            z-index: -1;
        }

        .lockscreen-wrapper {
            max-width: 400px;
            margin: 0 auto;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            z-index: 100;
            backdrop-filter: blur(10px);
            background: rgba(15, 23, 42, 0.7);
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(79, 172, 254, 0.2);
        }

        .lockscreen-wrapper::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                transparent 45%,
                rgba(0, 242, 254, 0.1) 50%,
                transparent 55%
            );
            transform: rotate(30deg);
            animation: shine 6s infinite linear;
        }

        @keyframes shine {
            0% { transform: translateX(-100%) rotate(30deg); }
            100% { transform: translateX(100%) rotate(30deg); }
        }

        .lockscreen-time {
            width: 100%;
            color: var(--primary-color);
            font-size: 60px;
            text-align: center;
            font-weight: 700;
            text-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
            margin-bottom: 30px;
            letter-spacing: 2px;
        }

        .lockscreen-name {
            text-align: center;
            font-weight: 600;
            font-size: 20px;
            color: var(--light-color);
            margin-bottom: 30px;
            text-shadow: 0 0 5px rgba(0, 242, 254, 0.5);
        }

        .lockscreen-item {
            border-radius: 10px;
            padding: 0;
            background: rgba(15, 23, 42, 0.8);
            position: relative;
            margin: 0 auto 30px auto;
            width: 100%;
            border: 1px solid rgba(79, 172, 254, 0.3);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .lockscreen-image {
            border-radius: 50%;
            position: absolute;
            left: -15px;
            top: -15px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            padding: 3px;
            z-index: 10;
            transition: all 0.3s ease;
        }

        .lockscreen-image:hover {
            transform: scale(1.1);
            box-shadow: var(--neon-glow);
        }

        .lockscreen-image>img {
            border-radius: 50%;
            width: 70px;
            height: 70px;
            border: 2px solid var(--dark-color);
        }

        .lockscreen-credentials {
            margin-left: 80px;
            padding: 15px;
        }

        .lockscreen-credentials .form-control {
            background: transparent;
            border: none;
            border-bottom: 1px solid rgba(79, 172, 254, 0.3);
            color: var(--light-color);
            border-radius: 0;
            padding: 10px 0;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .lockscreen-credentials .form-control:focus {
            border-bottom-color: var(--primary-color);
            box-shadow: 0 1px 0 0 var(--primary-color);
        }

        .lockscreen-credentials .btn {
            background-color: transparent;
            border: none;
            padding: 0 15px;
            color: var(--primary-color);
            font-size: 20px;
            transition: all 0.3s ease;
        }

        .lockscreen-credentials .btn:hover {
            color: var(--accent-color);
            transform: translateX(5px);
        }

        .help-block {
            text-align: center;
            margin: 20px 0;
            color: rgba(226, 232, 240, 0.7);
            font-size: 14px;
        }

        .text-center a {
            color: var(--primary-color);
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-block;
            padding: 5px 10px;
            border-radius: 5px;
        }

        .text-center a:hover {
            color: var(--accent-color);
            text-shadow: var(--neon-glow);
            transform: translateY(-2px);
        }

        /* 高科技网格背景 */
        #grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.1;
            background-image:
                linear-gradient(rgba(79, 172, 254, 0.3) 1px, transparent 1px),
                linear-gradient(90deg, rgba(79, 172, 254, 0.3) 1px, transparent 1px);
            background-size: 50px 50px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .lockscreen-wrapper {
                width: 90%;
                padding: 20px;
            }

            .lockscreen-time {
                font-size: 40px;
            }

            .lockscreen-name {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
<!-- 高科技网格背景 -->
<div id="grid-bg"></div>

<div class="lockscreen-wrapper">
    <div class="lockscreen-time"></div>
    <div class="lockscreen-name">[[ ${user.loginName} ]] / [[${#strings.defaultString(user.userName, '-')}]]</div>

    <div class="lockscreen-item">
        <div class="lockscreen-image">
            <img th:src="(${#strings.isEmpty(user.avatar)}) ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="this.src='img/profile.jpg'" class="img-circle" alt="用户头像">
        </div>
        <form class="lockscreen-credentials" method="post" action="#" onsubmit="return false;">
            <div class="input-group">
                <input type="password" name="password" autocomplete="off" class="form-control" placeholder="请输入解锁密码">
                <div class="input-group-btn">
                    <button type="button" class="btn" onclick="unlock()"><i class="fa fa-arrow-right"></i></button>
                </div>
            </div>
        </form>
    </div>

    <div class="help-block text-center">系统已锁定，请输入密码解锁</div>
    <div class="text-center">
        <a th:href="@{logout}">切换用户登录</a>
    </div>
</div>

<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script src="../static/js/three.min.js" th:src="@{/js/three.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.8.0}"></script>

<script th:inline="javascript">
    var ctx = [[@{/}]];

    // 时间格式化函数
    Date.prototype.format = function(fmt) {
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };

        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }

        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }

    // 更新时间显示
    function updateTime() {
        $('.lockscreen-time').text((new Date()).format('hh:mm:ss'));
        setTimeout(updateTime, 1000);
    }

    // 解锁函数
    function unlock() {
        var password = $("input[name='password']").val();
        if ($.common.isEmpty(password)) {
            $.modal.msg("请输入密码");
            return;
        }

        var index = "";
        var config = {
            url: ctx + "unlockscreen",
            type: "post",
            dataType: "json",
            data: { password: password },
            beforeSend: function() {
                index = layer.load(2, {shade: false});
            },
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    location.href = ctx + 'index';
                } else {
                    $.modal.msg(result.msg);
                    $("input[name='password']").val("");
                }
                layer.close(index);
            }
        };
        $.ajax(config);
    };

    // 3D粒子背景
    var container, camera, scene, renderer;
    var particles = [];

    function initParticles() {
        container = document.createElement('div');
        container.style.position = 'fixed';
        container.style.top = '0';
        container.style.left = '0';
        container.style.width = '100%';
        container.style.height = '100%';
        container.style.zIndex = '-1';
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 1000;

        scene = new THREE.Scene();

        // 创建粒子
        var geometry = new THREE.BufferGeometry();
        var vertices = [];
        var colors = [];

        for (var i = 0; i < 1000; i++) {
            var x = Math.random() * 2000 - 1000;
            var y = Math.random() * 2000 - 1000;
            var z = Math.random() * 2000 - 1000;

            vertices.push(x, y, z);

            // 使用科技感的蓝绿色调
            colors.push(0, 0.95, 0.95);
            colors.push(0.3, 0.8, 1);
            colors.push(0, 0.95, 0.95);
        }

        geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
        geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

        var material = new THREE.PointsMaterial({
            size: 2,
            vertexColors: true,
            transparent: true,
            opacity: 0.8,
            blending: THREE.AdditiveBlending
        });

        var particles = new THREE.Points(geometry, material);
        scene.add(particles);

        renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        window.addEventListener('resize', onWindowResize, false);
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animateParticles() {
        requestAnimationFrame(animateParticles);
        renderParticles();
    }

    function renderParticles() {
        camera.position.z -= 1;
        if (camera.position.z < 800) camera.position.z = 1000;

        var time = Date.now() * 0.001;
        camera.position.x = Math.sin(time * 0.1) * 500;
        camera.position.y = Math.cos(time * 0.2) * 500;

        camera.lookAt(scene.position);
        renderer.render(scene, camera);
    }

    // 初始化
    $(function() {
        updateTime();

        // 回车键解锁
        $(document).keydown(function(event) {
            if (event.keyCode == 13) {
                unlock();
            }
        });

        // 初始化3D粒子背景
        initParticles();
        animateParticles();
    });
</script>
</body>
</html>